<template>
  <div id="account">
    <van-nav-bar :title="$t('order.inputForm')" left-text left-arrow @click-left="$router.back()" />
    <!-- 选择收货地址 -->
    <van-contact-card
      :type="cardType"
      :add-text="$t('order.location')"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />
    <!-- 联系人列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-contact-list
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </van-popup>

    <van-cell-group>
      <van-cell :title="$t('order.arrivalTime')" :value="$t(deliveryTime)" is-link>
        <template slot="label">
          <span class="custom-title">{{ $t('order.outTimeGetMoney') }}</span>
          <van-icon name="question-o" />
        </template>
      </van-cell>
      <!-- 送货时间区间选择器 -->

      <!-- 商品缩略图 -->
      <div class="wrapper">
        <div class="productImageWrapper">
          <ul class="imageWrapper">
            <li style="display:inline" v-for="(item,index) in goods" :key="index">
              <img :src="item.small_image" alt />
            </li>
          </ul>
        </div>
        <ul class="productCount">
          <span>{{this.goods.length}}</span>
          <van-icon name="arrow" />
        </ul>
      </div>
    </van-cell-group>

    <!-- 支付方式选择 -->
    <van-radio-group v-model="radio">
      <van-cell-group :title="$t('mine.payMethod')">
        <van-cell clickable @click="radio = '1'">
          <template slot="title">
            <img
              src="../assets/image/order/wx.png"
              alt
              width="25px"
              height="25px"
              style=" vertical-align: middle;padding-right:5px"
            />
            <span>{{$t('order.wechatPay')}}</span>
          </template>
          <van-radio slot="right-icon" name="1" checked-color="#07c160" />
        </van-cell>
        <van-cell clickable @click="radio = '2'">
          <template slot="title">
            <img
              src="../assets/image/order/zfb.png"
              alt
              width="25px"
              height="25px"
              style=" vertical-align: middle;padding-right:5px"
            />
            <span>{{$t('order.aliPay')}}</span>
          </template>
          <van-radio slot="right-icon" name="2" checked-color="#07c160" />
        </van-cell>
        <van-cell clickable @click="radio = '3'">
          <template slot="title">
            <img
              src="../assets/image/order/hb.png"
              alt
              width="25px"
              height="25px"
              style=" vertical-align: middle;padding-right:5px"
            />
            <span>{{$t('order.huabeiPay')}}</span>
          </template>
          <van-radio slot="right-icon" name="3" checked-color="#07c160" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <!-- 备注 -->
    <van-cell-group style="margin-top: 0.6rem">
      <van-field
        :label="$t('order.mark')"
        type="textarea"
        :placeholder="$t('order.tip')"
        rows="1"
        autosize
        is-link
      />
    </van-cell-group>

    <!-- 商品金额 -->
    <van-cell-group style="margin-top: 0.6rem">
      <van-cell :title="$t('order.totalMoney')">
        <div class="money">{{(totalPrice/100) | moneyFormat }}</div>
      </van-cell>
      <van-cell :title="$t('order.sendMoney')">
        <div class="money">0.00</div>
      </van-cell>
      <van-cell :title="$t('order.point')" v-show="isShowPreferential">
        <div class="integralToMoney">-{{10 | moneyFormat}}</div>
      </van-cell>
    </van-cell-group>

    <!-- 提交订单 -->
    <van-submit-bar
      :price="totalPrice"
      :label="$t('order.pay')"
      :button-text="$t('order.sendForm')"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowPreferential: false,
      radio: '1', // 支付方式
      goods: [],
      deliveryTime: 'order.deliveryTime',
      chosenContactId: null,
      editingContact: {},
      showList: false,
      showEdit: false,
      isEdit: false,
      list: []
    }
  },
  methods: {
    onSubmit () {
      this.$toast('暂无')
    },
    //   获取收货人信息
    getAddress () {
      let id = localStorage.getItem('userId')
      this.$http.get(`/address/${id}`).then(res => {
        this.list = res.data.data
      })
    },
    // 添加联系人
    onAdd () {
      this.$router.push('/mine/myAddress/addAddress')
    },

    // 编辑联系人
    onEdit (item) {
      this.isEdit = true
      this.showEdit = true
      this.editingContact = item
    },

    // 选中联系人
    onSelect () {
      this.showList = false
    }
  },
  created () {
    this.getAddress()
    this.goods = JSON.parse(localStorage.getItem('shopList'))
  },
  computed: {
    // 总价
    totalPrice () {
      let sum = 0
      // 循环所有商品
      this.goods.forEach(v => {
        // 如果勾选就把价格加到总价上
        if (v.ischk) {
          sum += v.price * v.count
        }
      })
      // 返回结果 (默认是分为单位，所有转化成元 *100)
      return sum * 100
    },
    cardType () {
      return this.chosenContactId !== null ? 'edit' : 'add'
    },
    currentContact () {
      const id = this.chosenContactId
      return id !== null ? this.list.filter(item => item.id === id)[0] : {}
    }
  }
}
</script>

<style lang="less">
#account {
  .van-contact-list {
    min-height: 40rem;
  }

  .wrapper {
    height: 4rem;
    width: 100%;
    position: relative;
    .productImageWrapper {
      display: flex;
      white-space: nowrap;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: start;
      height: 4rem;
      width: 80%;
      overflow: hidden;
      .imageWrapper {
        flex-wrap: nowrap;
        img {
          height: 3rem;
          width: 3rem;
        }
      }
    }
    .productCount {
      right: 0.1rem;
      top: 1.5rem;
      position: absolute;
      color: grey;
    }
  }
}
</style>
